<template>
    <div>
        <city-head :cities = 'cities'></city-head>
        <city-list 
        :cities = 'cities' 
        :hotCities = 'hotCities'
        :letter = "letter"
        >
        </city-list>
        <city-bet :cities = 'cities' @change="letterChange"></city-bet>
    </div>
</template>
<script>
import axios from 'axios'
import CityHead from './components/Header'
import CityList from './components/List'
import CityBet from './components/Alphabet'
export default {
    name:'City',
    components:{
        CityHead,
        CityList,
        CityBet
    },
    data(){
        return{
            cities:{},
            hotCities:[],
            letter:''
        }
    },
    methods:{
        getCityInfo(){
            axios.get('https://easy-mock.com/mock/5b4ee1efc7b80163e783efcc/example/citylist')
            .then(this.getCityInfoSucc)
        },
        getCityInfoSucc(res){
            res = res.data
            const data = res.data
            this.cities = data.cities
            this.hotCities = data.hotCities
        },
        letterChange(letter)
        {
            this.letter = letter
        }
    },
    mounted(){
        this.getCityInfo()
    }
}
</script>
<style lang="stylus" scoped>

</style>
